<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      :style="{
        backgroundColor: renderRGB()
      }"
      @click="onClicktoPins"
    >
      <img
        alt=""
        v-lazy
        ref="imgTarget"
        :src="props.data.photo"
        class="w-full rounded bg-transparent"
        :style="{
          height:
            (props.width / props.data.photoWidth) * props.data.photoHeight +
            'px'
        }"
      />
      <!-- 遮罩层 -->
      <div
        class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duraation-300 group-hover:opacity-100 xl:block"
      >
        <!-- 分享 -->
        <m-button class="absolute top-1.5 left-1.5" @click="shareClick">
          分享
        </m-button>
        <!-- 点赞 -->
        <m-button
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
        />
        <!-- 下载 -->
        <m-button
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          icon="download"
          size="small"
          @click="onHandleDownload"
          iconClass=" fill-zinc-900 dark:fill-zinc-200"
        />
        <!-- 全屏 -->
        <m-button
          class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
          type="info"
          icon="full"
          size="small"
          @click="imgFullScreen"
          iconClass=" fill-zinc-900 dark:fill-zinc-200"
        />
      </div>
    </div>
    <!-- 标题   -->
    <p class="text-sm mt-1 font-bold text-zinc-900 dark:texr-zinc-300 px-1">
      {{ props.data.title }}
    </p>
    <div class="flex items-center mt-1 px-1">
      <img
        v-lazy
        class="h-2 w-2 rounded-full"
        :src="props.data.avatar"
        alt=""
      />
      <span class="text-sm text-zinc-500 ml-1">{{ props.data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import { saveAs } from 'file-saver'
import { renderRGB } from '@/utils/color'
import { message } from '@/libs'
import { useFullscreen, useElementBounding } from '@vueuse/core'
import { weiBoShare } from '@/utils/share.js'
const emits = defineEmits(['clicktoPins'])

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  width: {
    type: Number,
    required: true
  }
})
// 下载按钮
const onHandleDownload = () => {
  message('success', '下载成功')
  saveAs(props.data.photoDownLink)
}
const imgTarget = ref(null)
// 生成全屏方法
/* 
  @params isFullscreen ：当前是否处于全屏状态
  @params enter ：进入全屏
  @params exit ：退出全屏
  @params toggle ：切换全屏状态
*/
const {
  isFullscreen,
  enter: imgFullScreen,
  exit,
  toggle
} = useFullscreen(imgTarget)

// 获取图片的宽高及 x y 坐标
const {
  width: imgTargetWidth,
  height: imgTargetHeight,
  x: imgTargetX,
  y: imgTargetY
} = useElementBounding(imgTarget)

// 计算当前图片的中心位置
const imgCenter = computed(() => {
  return {
    translateX: parseInt(imgTargetX.value + imgTargetWidth.value / 2),
    translateY: parseInt(imgTargetY.value + imgTargetHeight.value / 2)
  }
})
// 进入详情
const onClicktoPins = () => {
  emits('clicktoPins', { id: props.data.id, location: imgCenter.value })
}

// 分享事件
const shareClick = () => {
  weiBoShare(
    props.data.photo,
    `https://imooc-front.lgdsunday.club/pins/${props.data.id}`
  )
}
</script>
<style scoped lang="scss"></style>
